<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
   <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery2.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .tbl {
            height: 100px;              /*不会作用于  thead 和 tfoot 中的单元格  */
            width: 800px;
            border: 1px solid red;       /*边框默认是 不可见的*/
            margin: 20px auto;          /*表格距离上边距20  水平居中*/
            font-size: 20px;
            text-align: center;         /*表格文本水平居中*/
            border-collapse: collapse;  /*边框合并并取消重叠       此属性会导致 cellpadding="110" cellspacing="110" 两个属性失效    */
        }

        td {
            border:1px solid red;
        }

        th{
            border:1px solid red;
        }



        input {
            margin-left: 5px;

            width: 100%;
            height: 100%;
            /*这两个去除input输入框的边框 */
            border: none;
            outline: medium;
        }

        input:focus {

            width: 100%;
            height: 100%;

            border: none;
            outline: medium;
        }


        textarea {
            font-size: 16px;
            width: 100%;

            resize: vertical;         /*只能上下拖动   resize  缩放属性*/

            border: none;
            outline: medium;
        }


    </style>
</head>
<body>


<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"   onclick="fun2()" >
    开始演示模态框
</button>



<!-- 图片预览模态框（Modal） -->


<!--如果模态框（modal）不设置tabindex="-1"，可以通过tab键切换除模态框外的其他元素的焦点，模态框设置了tabindex='-1'，tab键只能切换模态框内的元素的焦点-->


<div class="modal fade" id="tuPianYuLan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width: 80%;"  >
        <div class="modal-content" >
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal2" aria-hidden="true" onclick="fun()">
                    &times;
                </button>

                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>

            </div>
            <div class="modal-body">


                <div style="display: block;width: 100%">

                    <table class="tbl" cellpadding="110" cellspacing="110">

                        <caption style="margin-bottom: 30px"><h3>表格标题</h3></caption>
                        <thead>
                        <tr>
                            <th>姓名</th>       <!--th 表头会自动水平居中     td需要设置-->
                            <th>年龄</th>
                            <th>性别</th>
                            <th>爱好111</th>   <!--表格的宽度和内容的长度有关系  内容太多会撑开 表格自动加宽超过设置的1500px-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>张三</td>
                            <td>20</td>
                            <td>男</td>
                            <td rowspan="2">健身</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>20</td>
                            <td>男</td>

                        </tr>
                        <tr>
                            <td>张飞</td>
                            <td>
                                <select  id="sel"  style="vertical-align: top;font-size: 15px">
                                    <option value="1">对</option>
                                    <option value="0">&times;</option>
                                </select>
                            </td>
                            <td>男</td>
                            <td>健身</td>
                        </tr>
                        <tr>
                            <td>王五</td>
                            <td>20</td>
                            <td> <textarea rows="3">&nbsp;&nbsp;</textarea></td>
                            <td>健身</td>
                        </tr>
                        <tr>
                            <td><input /></td>
                            <td colspan="3">列合并</td>

                        </tr>
                        </tbody>

                        <tfoot>
                        <tr>
                            <td>脚</td>
                            <td colspan="3">表格foot</td>
                        </tr>
                        </tfoot>

                    </table>
                </div>




            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>




<script>

    /*通过 data-dismiss="modal"  属性可以关闭 modal弹窗  但是如果同事有两个 modal 弹窗 会都关闭  所以可以用下面的方法进行关闭*/

    function fun(){
      $('#tuPianYuLan').modal('hide')
    }

    function fun2(){
        $('#tuPianYuLan').modal('show')
    }


</script>


<script>
    $('#div111')[0].innerText='鲁大师'

    $('#div222')[0].innerText='鲁大师爱生活'
</script>

</body>
</html>